<template>
  <div class="setting-panel-gui">
    <g-field-collapse
      label="全局样式"
    >
      <g-field
        :level="2"
        tooltip="请选择您系统有的字体，如果您系统无此字体，标题将会显示默认字体"
        label="字体"
      >
        <g-select
          v-model="config.global.fontFamily"
          :data="fontFamilys"
        />
      </g-field>
      <g-field
        :level="2"
        label="开启动画"
      >
        <n-switch
          v-model:value="config.global.animation"
        />
      </g-field>
      <g-field
        :level="2"
        label="动画时间"
      >
        <g-input-number
          v-model="config.global.duration"
          :min="100"
          :max="999999"
          :step="100"
          suffix="ms"
        />
      </g-field>
      <g-field
        :level="2"
        label="行间距"
      >
        <g-input-number
          v-model="config.global.padding"
          :min="0"
          :max="100"
          :step="1"
          suffix="px"
        />
      </g-field>
      <g-field
        :level="2"
        label="数量"
      >
        <g-input-number
          v-model="config.global.quantity"
          :min="1"
          :max="100"
          :step="1"
        />
      </g-field>
      <g-field
        :level="2"
        tooltip="开启自动轮播后, 配置不会立即生效, 将会在下一次轮播后生效"
        label="自动轮播"
      >
        <n-switch
          v-model:value="config.global.loop"
        />
      </g-field>
      <g-field
        v-if="config.global.loop === true"
        :level="2"
        label="轮播时间"
      >
        <g-input-number
          v-model="config.global.looptime"
          :min="100"
          :max="999999"
          :step="100"
          suffix="ms"
        />
      </g-field>
      <g-field-collapse
        v-model="config.global.sort.show"
        :toggle="true"
        label="排序"
      >
        <g-field
          :level="2"
          label="排序"
        >
          <g-select
            v-model="config.global.sort.sort"
            :data="pairData9556"
          />
        </g-field>
      </g-field-collapse>
    </g-field-collapse>
    <g-field-collapse
      v-model="config.index.show"
      :toggle="true"
      label="序列号"
    >
      <g-field-collapse
        label="文本样式"
      >
        <g-field
          :level="2"
          label="字号"
        >
          <g-input-number
            v-model="config.index.textarea.fontSize"
            :min="12"
            :max="100"
            :step="1"
          />
        </g-field>
        <g-field
          :level="2"
          label="颜色"
        >
          <g-color-picker
            v-model="config.index.textarea.color"
          />
        </g-field>
        <g-field
          :level="2"
          label="字体粗细"
        >
          <g-select
            v-model="config.index.textarea.fontWeight"
            :data="fontWeights"
          />
        </g-field>
      </g-field-collapse>
      <g-field
        :level="2"
        label="宽度"
      >
        <g-input
          v-model="config.index.width"
        />
      </g-field>
      <g-field
        :level="2"
        label="间隔"
      >
        <g-input-number
          v-model="config.index.padding"
          :min="0"
          :max="100"
          :step="1"
          suffix="px"
        />
      </g-field>
      <g-field
        :level="2"
        label="格式"
      >
        <g-select
          v-model="config.index.format"
          :data="pairData1661"
        />
      </g-field>
    </g-field-collapse>
    <g-field-collapse
      label="内容"
    >
      <g-field-collapse
        label="文本样式"
      >
        <g-field
          :level="2"
          label="字号"
        >
          <g-input-number
            v-model="config.content.textarea.fontSize"
            :min="12"
            :max="100"
            :step="1"
            suffix="px"
          />
        </g-field>
        <g-field
          :level="2"
          label="颜色"
        >
          <g-color-picker
            v-model="config.content.textarea.color"
          />
        </g-field>
        <g-field
          :level="2"
          label="字体粗细"
        >
          <g-select
            v-model="config.content.textarea.fontWeight"
            :data="fontWeights"
          />
        </g-field>
      </g-field-collapse>
      <g-field-collapse
        v-model="config.content.marquee.show"
        :toggle="true"
        label="跑马灯"
      >
        <g-field
          :level="2"
          label="动画时间"
        >
          <g-input-number
            v-model="config.content.marquee.duration"
            :min="100"
            :max="999999"
            :step="100"
            suffix="ms"
          />
        </g-field>
      </g-field-collapse>
    </g-field-collapse>
    <g-field-collapse
      v-model="config.number.show"
      :toggle="true"
      label="数值"
    >
      <g-field
        :level="2"
        label="字号"
      >
        <g-input-number
          v-model="config.number.fontSize"
          :min="12"
          :max="100"
          :step="1"
          suffix="px"
        />
      </g-field>
      <g-field
        :level="2"
        label="颜色"
      >
        <g-color-picker
          v-model="config.number.color"
        />
      </g-field>
      <g-field
        :level="2"
        label="字体粗细"
      >
        <g-select
          v-model="config.number.fontWeight"
          :data="fontWeights"
        />
      </g-field>
      <g-field
        :level="2"
        label="间隔"
      >
        <g-input-number
          v-model="config.number.padding"
          :min="0"
          :max="1000"
          :step="1"
          suffix="px"
        />
      </g-field>
      <g-field
        :level="2"
        label="显示百分数"
      >
        <n-switch
          v-model:value="config.number.percentage"
        />
      </g-field>
      <g-field
        :level="2"
        label="千分位分隔符"
      >
        <n-switch
          v-model:value="config.number.separatingChart"
        />
      </g-field>
      <g-field
        :level="2"
        label="保留小数位"
      >
        <g-input-number
          v-model="config.number.decimal"
          :min="0"
          :max="100"
          :step="1"
        />
      </g-field>
      <g-field
        :level="2"
        label="前后缀"
        :is-flat="true"
      >
        <g-input
          v-model="config.number.symbol.prefix"
          inline="inline"
          label="前缀"
        />
        <g-input
          v-model="config.number.symbol.suffix"
          inline="inline"
          label="后缀"
        />
        <g-input-number
          v-model="config.number.symbol.marginLeft"
          :min="0"
          :max="1000"
          :step="1"
          suffix="px"
          inline="inline"
          label="左间距"
        />
        <g-input-number
          v-model="config.number.symbol.marginRight"
          :min="0"
          :max="1000"
          :step="1"
          suffix="px"
          inline="inline"
          label="右间距"
        />
      </g-field>
    </g-field-collapse>
    <g-field-collapse
      v-model="config.bar.show"
      :toggle="true"
      label="柱状图"
    >
      <g-field
        :level="2"
        label="填充类型"
      >
        <n-radio-group
          v-model:value="config.bar.fillColorType"
          size="small"
        >
          <n-radio-button
            v-for="em in fillTypes"
            :key="em.id"
            :value="em.id"
          >
            {{ em.value }}
          </n-radio-button>
        </n-radio-group>
      </g-field>
      <g-field
        v-if="config.bar.fillColorType === 'solid'"
        :level="2"
        label="颜色"
      >
        <g-color-picker
          v-model="config.bar.color"
        />
      </g-field>
      <g-field
        v-if="config.bar.fillColorType === 'gradient'"
        :level="2"
        label="开始颜色"
      >
        <g-color-picker
          v-model="config.bar.fromColor"
        />
      </g-field>
      <g-field
        v-if="config.bar.fillColorType === 'gradient'"
        :level="2"
        label="结束颜色"
      >
        <g-color-picker
          v-model="config.bar.toColor"
        />
      </g-field>
      <g-field
        :level="2"
        label="高度"
      >
        <g-input-number
          v-model="config.bar.height"
          :min="1"
          :max="1000"
          :step="1"
          suffix="px"
        />
      </g-field>
      <g-field
        :level="2"
        label="圆角"
      >
        <g-input-number
          v-model="config.bar.radius"
          :min="0"
          :max="1000"
          :step="1"
          suffix="px"
        />
      </g-field>
      <g-field-collapse
        v-model="config.bar.threshold.show"
        :toggle="true"
        label="高亮"
      >
        <g-field
          :level="2"
          label="阈值"
        >
          <g-input-number
            v-model="config.bar.threshold.value"
            :step="1"
            suffix="%"
          />
        </g-field>
        <g-field
          :level="2"
          label="填充类型"
        >
          <n-radio-group
            v-model:value="config.bar.threshold.fillColorType"
            size="small"
          >
            <n-radio-button
              v-for="em in fillTypes"
              :key="em.id"
              :value="em.id"
            >
              {{ em.value }}
            </n-radio-button>
          </n-radio-group>
        </g-field>
        <g-field
          v-if="config.bar.threshold.fillColorType === 'solid'"
          :level="2"
          label="颜色"
        >
          <g-color-picker
            v-model="config.bar.threshold.color"
          />
        </g-field>
        <g-field
          v-if="config.bar.threshold.fillColorType === 'gradient'"
          :level="2"
          label="开始颜色"
        >
          <g-color-picker
            v-model="config.bar.threshold.fromColor"
          />
        </g-field>
        <g-field
          v-if="config.bar.threshold.fillColorType === 'gradient'"
          :level="2"
          label="结束颜色"
        >
          <g-color-picker
            v-model="config.bar.threshold.toColor"
          />
        </g-field>
      </g-field-collapse>
    </g-field-collapse>
    <g-field-collapse
      v-model="config.light.show"
      :toggle="true"
      label="流光"
    >
      <g-field
        :level="2"
        label="颜色"
      >
        <g-color-picker
          v-model="config.light.color"
        />
      </g-field>
      <g-field
        :level="2"
        label="宽度"
      >
        <g-input-number
          v-model="config.light.width"
          :min="0"
          :max="1000"
          :step="1"
          suffix="px"
        />
      </g-field>
      <g-field
        :level="2"
        label="高度"
      >
        <g-input-number
          v-model="config.light.height"
          :min="0"
          :max="1000"
          :step="1"
          suffix="px"
        />
      </g-field>
      <g-field
        :level="2"
        label="动画间隔"
      >
        <g-input-number
          v-model="config.light.duration"
          :min="100"
          :max="999999"
          :step="100"
          suffix="ms"
        />
      </g-field>
    </g-field-collapse>
    <g-field-collapse
      v-model="config.segment.show"
      :toggle="true"
      label="分隔线"
    >
      <g-field
        :level="2"
        label="颜色"
      >
        <g-color-picker
          v-model="config.segment.color"
        />
      </g-field>
      <g-field
        :level="2"
        label="高度"
      >
        <g-input-number
          v-model="config.segment.height"
          :min="0"
          :max="1000"
          :step="1"
          suffix="px"
        />
      </g-field>
    </g-field-collapse>
  </div>
</template>

<script lang='ts' setup>
import { toRef } from 'vue'
import { TableBar } from './table-bar'

const props = defineProps<{
  com: TableBar
}>()

const config = toRef(props.com, 'config')

const pairData9556 = [
  { key: 'desc', value: '降序' },
  { key: 'asc', value: '升序' },
]

const pairData1661 = [
  { key: '1', value: '1' },
  { key: '2', value: 'NO.1' },
  { key: '3', value: '(1)' },
]
const fontFamilys = GlFontFamilys
const fontWeights = GlFontWeights
const fillTypes = GlFillTypes


</script>
